<template>
  <div class=" download">
    <el-container>
      <el-main>
        <el-card v-for="(listitem, listindex) in list" :key="listindex" class="box-card">
          <div slot="header" class="clearfix">
            <div style=""></div>
            <span>{{ listitem.system }}</span>
          </div>
          <div class="card-info">
            <div v-for="(item, index) in listitem.arr" :key="index" class="item">
              <vue-qr v-if="item.text == '安卓端' || item.text == 'IOS端'" :text="item.url" colorDark="#808080" :dotScale="0.8" :logoScale="0.2" :logoSrc="item.imageUrl" :size="160"></vue-qr>
              <div v-else style="width: 172px; height: 112px;padding:10px 40px;">
                <el-image style="width: 100%; height: 100%" :src="item.imageUrl" fit="fill"></el-image>
              </div>
              <div class="text">{{ item.text }}</div>
              <div class="version">版本：{{ item.version }}</div>
              <el-button v-if="item.text == 'Windows' || item.text == 'Mac'" style="margin-top:12px;">点击下载</el-button>
            </div>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import vueQr from 'vue-qr';
export default {
  components: {
    vueQr
  },
  data() {
    return {
      list: [
        {
          arr: [
            {
              url: 'https://www.bilibili.com',
              imageUrl: require('./dowload/android.png'),
              text: '安卓端',
              version: '0.1.0.1'
            },
            {
              url: '扫二维码！！！',
              imageUrl: require('./dowload/ios.png'),
              text: 'IOS端',
              version: '0.1.0.1'
            },
            {
              url: '扫二维码',
              imageUrl: require('./dowload/windows.png'),
              text: 'Windows',
              version: '0.1.0.1'
            },
            {
              url: '扫二维码',
              imageUrl: require('./dowload/ios.png'),
              text: 'Mac',
              version: '0.1.0.1'
            }
          ],
          system: 'WPS'
        },
        {
          arr: [
            {
              url: '扫二维码！！！',
              imageUrl: require('./dowload/android.png'),
              text: '安卓端',
              version: '0.1.0.1'
            },
            {
              url: '扫二维码！！！',
              imageUrl: require('./dowload/ios.png'),
              text: 'IOS端',
              version: '0.1.0.1'
            }
          ],
          system: 'ICPS'
        },
        {
          arr: [
            {
              url: '扫二维码！！！',
              imageUrl: require('./dowload/android.png'),
              text: '安卓端',
              version: '0.1.0.1'
            },
            {
              url: '扫二维码！！！',
              imageUrl: require('./dowload/ios.png'),
              text: 'IOS端',
              version: '0.1.0.1'
            }
          ],
          system: 'ICPS'
        },
        {
          arr: [
            {
              url: '扫二维码！！！',
              imageUrl: require('./dowload/android.png'),
              text: '安卓端',
              version: '0.1.0.1'
            },
            {
              url: '扫二维码！！！',
              imageUrl: require('./dowload/ios.png'),
              text: 'IOS端',
              version: '0.1.0.1'
            }
          ],
          system: 'ICPS'
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.download {
  .el-header {
    font-size: calc(#{$font_size} + 4px);
    font-weight: bold;
  }
}
.card-info {
  font-size: $font_size;
  display: flex;
  flex-wrap: wrap;
}
.item {
  text-align: center;
  margin: 10px 10px 10px 10px;
  padding: 10px;
  border: 1px #ebeeec solid;
  border-radius: 4px;
  .text {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }
  .version {
    font-size: 14px;
    color: #969799;
    text-align: center;
    line-height: 40px;
  }
}
.el-card {
  margin: 10px;
  .clearfix {
    > div {
      background: $bg_color;
      width: 5px;
      height: 20px;
      margin-right: 10px;
    }
    display: flex;
    font-size: $font_size;
    font-weight: bold;
  }
}
.el-card:first-child {
  margin: 10px 10px 10px 10px;
}
.el-main {
  padding: 0;
  background: #f2f5f3;
}
</style>
